<template>
  <div id="conten">
    <div class="ABox">
      <div class="title">
        <span class="ywColor">业务机（{{ ywjData.ip }}）</span>
      </div>

      <div style="margin:10px">
        <el-scrollbar ref="scrollbarA" style="height: 470px" wrap-class="list" wrap-style="overflow-x:hidden;">
          <div v-if="!ywjData.jsonData" class="nullBox">保障参数信息查询结果为空</div>
          <safeItem v-else :json-data="ywjData.jsonData" display-type="displayNameA" />
        </el-scrollbar>
      </div>
    </div>
    <div class="BBox">
      <div class="title">
        <span class="bzColor">保障机（{{ bzjData.ip }}）</span>
      </div>
      <div style="margin:10px">
        <el-scrollbar ref="scrollbarA" style="height: 470px" wrap-class="list" wrap-style="overflow-x:hidden;">
          <div v-if="!bzjData.jsonData" class="nullBox">保障参数信息查询结果为空</div>
          <safeItem v-else :json-data="bzjData.jsonData" display-type="displayNameB" />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import {
  findGroupConf
} from '@/api/console/group'

import safeItem from '@/views/console/securityGroup/groupDialog/sysDialog/safeItem'

export default {
  components: {
    safeItem
  },
  data() {
    return {
      ywjData: {
        id: '',
        ip: '',
        jsonData: {
          systemSetting: {
            open: 0
          },
          systemTrendSetting: {
            open: 0
          }
        }
      },
      bzjData: {
        id: '',
        ip: '',
        jsonData: {
          systemSetting: {
            open: 0
          },
          systemTrendSetting: {
            open: 0
          }
        }
      }
    }
  },
  methods: {
    // 打开查看系统参数
    initSystemParame(item) {
      this.confPropInfoId = item.id
      this.$nextTick(function() {
        this.ywjData.id = item.importantNodeId
        this.ywjData.ip = item.importantNodeIp
        this.bzjData.id = item.securityNodeId
        this.bzjData.ip = item.securityNodeIp
      })
      findGroupConf({
        'id': this.confPropInfoId
      }).then(response => {
        for (const items in response.data) {
          if (items == item.importantNodeId) {
            if (typeof response.data[items] === 'string') {
              this.ywjData.jsonData = JSON.parse(response.data[items])
            } else if (response.data[items]) {
              this.ywjData.jsonData = response.data[items]
            } else {
              this.ywjData.jsonData = {
                systemSetting: {
                  open: 0
                },
                systemTrendSetting: {
                  open: 0
                }
              }
            }
          } else if (items == item.securityNodeId) {
            if (typeof response.data[items] === 'string') {
              this.bzjData.jsonData = JSON.parse(response.data[items])
            } else if (response.data[items]) {
              this.bzjData.jsonData = response.data[items]
            } else {
              this.bzjData.jsonData = {
                systemSetting: {
                  open: 0
                },
                systemTrendSetting: {
                  open: 0
                }
              }
            }
          }
        }
        // console.log(this.$data)
      }).catch(response => {
      })
    }
  }
}
</script>

<style scoped="scoped">
	#conten {
		display: flex;
		justify-content: space-between;
	}

	#conten>div {
		width: 450px;
		height: 549px;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
		padding: 10px;
	}

	#conten > .cenbox {
    width: 100px;
    margin-top:20px;
    border: 0;
		text-align: center;
}

	.title {
		text-align: center;
		padding: 10px;
		font-size: 16px;
	}

	.spanDom{
		display: inline-block;
		width: 90px;
	}

	.ywColor {
		color: #67c23a;
	}

	.topBpx {
		margin-top: 20px;
	}

	.bzColor {
		color: #1890ff
	}

	.canBox {
		border: 1px solid #e3e3e3;
		margin: 4px 0px;
		padding: 2px 10px;
		border-radius: 4px;
	}

	.canBox p{
		border-bottom: 1px solid #e3e3e3;
		margin: 5px 0px;
		font-size: 15px;
		color: #4daaff;
	}

	.canBox ul > li > div{
		display: flex;
	}

	.canBox ul > li  .noFlex > div{
		display: flex;
	}
	.canBox ul > li  .noFlex{
		display: block;
		border: 1px dotted #e2e2e2;
		padding: 8px;
		margin: 2px;
	}

	.canBox ul > li  .noFlex .leftSpan{
		width: 80px;
	}
	.canBox ul > li  .noFlex .rightSpan{
		flex: auto;
	}
	.canBox ul > li > div > .leftSpan{
		flex: 1;
	}

	.canBox ul > li > div > .rightSpan{
		flex: 2;
	}

	.value{
		color: #d0c9c9;
	}
	.flotR{
		float: right;
	}

	.serviceUl{
		border-bottom: 1px solid #e6e3e3;
		padding: 4px 0px;
	}

	.serviceUl:nth-last-child(1){
		border: 0;
	}

	.closeBtn{
		color: #f4734b;
	}
</style>
